<template>
  <div v-for="(item, key) in props.properties" :key="key">
    <div v-if="(typeof item) === 'object' && item">
      <PropertyRender :properties="item" @change="handleChange" />
    </div>
    <div v-else>
      <template v-if="propertyComponent[key]">
        <div>{{ propertyComponent[key].label }}</div>
        <component :is="propertyComponent[key].component" :value="item" @change="handleChange($event, key)"></component>
      </template>

    </div>
  </div>
</template>
<script setup>
import { useStore } from 'vuex'
const props = defineProps(['properties'])
const emit = defineEmits(['change'])

const store = useStore()
const { propertyComponent } = store.state
console.log(props.properties, 'props', propertyComponent)
const handleChange = (value, key) => {
  emit('change', value, key)
}
// props object
// 1.遍历
// 2.如果item不是对象的话，key去找对应的组件进行渲染
// 3.是对象的话，重复第一步

</script>
<style lang="scss"></style>
